<template>
  <div class="header-pc">
    <div class="header-pc-box">
      <!-- logo -->
      <div class="logo-box">
        <img
          class="logo-box-img"
          src="../assets/xwimg/logo.png"
          alt=""
        />
      </div>

      <!-- 导航列表 -->
      <div class="lists">
        <div
          v-for="item in visibleTabs"
          :key="item.value"
          :class="route.path === item.link ? 'lists-item lists-item-active' : 'lists-item'"
        >
          <RouterLink :to="item.link">{{ item.name }}</RouterLink>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useRoute } from 'vue-router'
import { useAuthStore } from '../stores/index.js'

const route = useRoute()
const authStore = useAuthStore()

const tabList = [
  { name: "首页", link: "/",     value: "home" },
  { name: "数据查询", link: "/dataquery", value: "dataquery" },
  { name: "报告展示", link: "/report/productView", value: "report" },
  { name: "作者服务", link: "/AuthorServices", value: "AuthorServices" },
  { name: "个人中心", link: "/personal",  value: "personal" },
  { name: "登录",     link: "/login",     value: "login" },
]

// 根据登录状态过滤
const visibleTabs = computed(() =>
  tabList.filter(item => {
    if (item.value === 'personal') return authStore.isLoggedIn
    if (item.value === 'login')   return !authStore.isLoggedIn
    return true
  })
)
</script>

<style scoped lang="scss">
.header-pc {
  width: 100%;
  height: 68px;
  background: #fff;
  display: flex;
  justify-content: space-around;

  .header-pc-box {
    width: 100%;
   
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 40px;

    .logo-box {
      .logo-box-img {
        width: 200px;
        height: 42px;
      }
    }

    .lists {
      display: flex;
      align-items: center;

      .lists-item {
        margin-left: 48px;
        a {
          color: #606266;
          font-size: 16px;
          font-weight: 500;
          text-decoration: none;
          padding: 8px 12px;
          border-radius: 4px;
          transition: all 0.3s;
        }
      }
      .lists-item-active a {
        color: #4098ff;
      }
    }
  }
}
</style>
